!
<template>
    <div class="PersonalHead">
   
       <div class="avatorBox">
           
        <div class="avator">
            <img src="" alt="">
        </div>
        
          <div class="editBox"> 
             <span>挨过粥粥</span>
             <span>个性签名</span>
          </div>
       </div>

        
    </div>
  </template>
  <script>
  
  export default {
    data() {
      return {
  
      };
    },
    components:{
     
    },
    methods: {
    
    }
  
  }
  </script>
  
  <style scoped>
  .PersonalHead{
     display: flex;
    justify-content: center;
    align-items: center;
  }
  .avatorBox{
    width: 100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .avator{
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background-color: rgb(40, 54, 54);
  }
  .editBox span{
    margin-top: 5px;
    height: 22px;
    display: block;
  }

  .editBox span:hover{
    background-color: rgba(225, 227, 230);

  }
  </style>